<template>
  <div id="app">
    <my-head></my-head>
    <router-view></router-view>
    <vodal :show="clockShow" animation="zoom" :width="380" :height="328" :closeButton='false'>
      <div class="vodal-main vodal-nzbox">
        <h4>闹钟提醒</h4>
        <ul class="con">
          <li>闹钟时间：<span>{{time}}</span></li>
          <li>提醒事件：<span>{{content}}</span></li>
          <li>备注：
            <textarea class="vt clock-remark" v-model="remark"></textarea>
          </li>
        </ul>
        <div class="tc auto vodal-btn-box">
          <button class="blue-button xl-btn-css" @click="clockClose">确认</button>
        </div>
      </div>
    </vodal>
  </div>
</template>
<script>
import MyHead from './components/Head'
export default {
  name: 'app',
  components: {
    MyHead
  },
  data() {
    return {
      clockShow: false,
      newTime: '',
      clockTime: '',
      clockId: '',
      content: '',
      remark: '',
      time: ''
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin
    }
  },
  watch: {
    isLogin(newVal, oldVal) {
      if (newVal) {
        this.clock()
        setInterval(this.clock, 60000)
      }
    }
  },
  methods: {
    clock() {
      this.$http.get('/sysClock/queryUnAlarm').then(data => {
        if (data.data.httpCode === 200) {
          if (data.data.rows[0]) {
            this.time = data.data.rows[0].time
            this.clockTime = new Date(data.data.rows[0].time).getTime()
            this.newTime = new Date().getTime()
            if (this.newTime - this.clockTime >= 0) {
              this.clockShow = true
              this.clockId = data.data.rows[0].id
              this.content = data.data.rows[0].content
              this.remark = data.data.rows[0].remark
            }
          }
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    clockClose() {
      this.$http.get('/sysClock/doAlarm', {
        params: {
          id: this.clockId
        }
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.clockShow = false
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    }
  }
}

</script>
<style>


</style>
